<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>微博首页</title>
    <!-- 引入axios -->
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
    <!-- 引入Vue -->
    <script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>

</head>

<body>
    <div>
        <div v-if="isLogin">
            <center>
                <h2>欢迎回来{{user.nickname}}</h2>
                <a href="/insert.html">发微博</a>
                <a href="JavaScript:void(0)" @click="logout()">退出登录</a>
            </center>
        </div>

        <div v-else> <!-- 判断是否登录:v-if是删除,v-show是隐藏 -->
            <center>
                <h1>微博首页</h1>
                <a href="/reg.html">注册</a>
                <a href="/login.html">登录</a>
            </center>
        </div>
        <hr>
        <div v-for="weibo in arr">
            <!-- 展示微博 -->
            <h3>
                <a :href="'/detail.html?id='+weibo.id">{{weibo.nickname}}说:{{weibo.content}}</a>
            </h3>
            <!-- 展示图片 -->
            <img :src="weibo.url" width="100">
            <hr>
        </div>
        <script>
            let v = new Vue({
                el: "body>div",
                data: {
                    isLogin: false,
                    arr: []
                },
                methods: {
                    logout() {
                        if (confirm("你确定退出登录吗")) {
                            axios.get("/logout").then(function (response) {
                                // 页面做出响应
                                v.isLogin = false;
                            })
                        }
                    }
                },
                created: function () {
                    // 发出异步请求获取所有微博
                    axios.get("/weibo/select").then(function (response) {
                        v.arr = response.data;
                    })
                    // 发出异步请求多去当前登录的对象
                    // 参数小于两个使用get请求
                    axios.get("/currentUser").then(function (response) {
                        // 给服务器返回一个用户对象
                        v.user = response.data;
                        // 如果登录可以得到一个用户对象  如果没等路则是一个空字符串
                        // 是空串返回false否则是true
                        v.isLogin = response.data == "" ? false : true;
                    })
                }
            })
        </script>
    </div>
</body>

</html>